<template>
	<view class="container">
		<view class="header">
			<text class="title">消息通知</text>
			<text class="subtitle">系统消息与课程通知</text>
		</view>

		<!-- 操作栏 -->
		<view class="actions">
			<uni-button size="mini" @tap="markAllRead">全部已读</uni-button>
			<uni-button size="mini" type="primary" @tap="refreshNotifications">刷新</uni-button>
		</view>

		<!-- 通知列表 -->
		<scroll-view scroll-y class="list">
			<view v-for="(item, index) in notifications" :key="item.id || index" class="notification-card" :class="{ unread: !item.isRead }" @tap="markRead(item)">
				<view class="icon-container">
					<uni-icons :type="getIconType(item.type)" size="20" :color="getIconColor(item.type)"></uni-icons>
				</view>
				<view class="content">
					<text class="title">{{ item.title }}</text>
					<text class="message">{{ item.message }}</text>
					<text class="time">{{ item.createdAt }}</text>
				</view>
				<view class="status">
					<view v-if="!item.isRead" class="unread-dot"></view>
				</view>
			</view>
			<view v-if="notifications.length === 0" class="empty">暂无消息通知</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	const notifications = ref<any[]>([]);

	// 前端人员：获取消息通知列表
	// BACKEND REQUIRED
	// GET /api/notifications?page=页码&pageSize=条数
	// Response 200
	// {
	//   "success": true,
	//   "data": [
	//     {
	//       "id": "NOTIF_001",
	//       "type": "course", // course, system, homework, live
	//       "title": "课程提醒",
	//       "message": "高等数学第3讲将在10分钟后开始",
	//       "isRead": false,
	//       "createdAt": "2025-08-26 20:12:00",
	//       "relatedId": "COURSE_001" // 关联的课程/作业ID
	//     }
	//   ],
	//   "page": 1,
	//   "pageSize": 20,
	//   "total": 15
	// }
	const fetchNotifications = () => {
		uni.request({
			url: '/api/notifications',
			method: 'GET',
			data: { page: 1, pageSize: 20 },
			success: (res: any) => {
				if (res.data && res.data.success) {
					notifications.value = res.data.data || [];
				} else {
					notifications.value = [];
				}
			},
			fail: () => { notifications.value = []; }
		});
	};

	// 前端人员：标记单条消息为已读
	// BACKEND REQUIRED
	// POST /api/notifications/read
	// body: { notificationId: string }
	// Response 200: { success: true }
	const markRead = (item: any) => {
		if (item.isRead) return;
		
		uni.request({
			url: '/api/notifications/read',
			method: 'POST',
			data: { notificationId: item.id },
			success: (res: any) => {
				if (res.data?.success) {
					item.isRead = true;
				}
			}
		});
	};

	// 前端人员：标记所有消息为已读
	// BACKEND REQUIRED
	// POST /api/notifications/read-all
	// Response 200: { success: true }
	const markAllRead = () => {
		uni.request({
			url: '/api/notifications/read-all',
			method: 'POST',
			success: (res: any) => {
				if (res.data?.success) {
					notifications.value.forEach(item => item.isRead = true);
					uni.showToast({ title: '已全部标记为已读', icon: 'success' });
				}
			}
		});
	};

	const refreshNotifications = () => {
		fetchNotifications();
		uni.showToast({ title: '刷新成功', icon: 'success' });
	};

	const getIconType = (type: string) => {
		const iconMap: { [key: string]: string } = {
			course: 'calendar',
			system: 'info',
			homework: 'paperplane',
			live: 'videocam'
		};
		return iconMap[type] || 'info';
	};

	const getIconColor = (type: string) => {
		const colorMap: { [key: string]: string } = {
			course: '#1890ff',
			system: '#52c41a',
			homework: '#fa8c16',
			live: '#f5222d'
		};
		return colorMap[type] || '#666';
	};

	onMounted(fetchNotifications);
</script>

<style>
	.container { padding: 30rpx; }
	.header { margin-bottom: 20rpx; }
	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	.actions { display: flex; gap: 12rpx; margin: 16rpx 0 20rpx; }
	.list { max-height: calc(100vh - 260rpx); }
	.notification-card { display: flex; gap: 16rpx; background: #fff; border-radius: 14rpx; padding: 20rpx; margin-bottom: 16rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,.05); }
	.notification-card.unread { background: #f0f9ff; border-left: 4rpx solid #1890ff; }
	.icon-container { display: flex; align-items: center; justify-content: center; width: 60rpx; height: 60rpx; background: #f5f5f5; border-radius: 50%; }
	.content { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
	.content .title { font-size: 16px; font-weight: 600; color: #222; }
	.content .message { font-size: 14px; color: #666; line-height: 1.4; }
	.content .time { font-size: 12px; color: #999; }
	.status { display: flex; align-items: center; }
	.unread-dot { width: 12rpx; height: 12rpx; background: #1890ff; border-radius: 50%; }
	.empty { text-align: center; color: #999; margin-top: 60rpx; }
</style>



